# Component: Article Template

Dynamic page builder and layout orchestrator

![[Pasted image 20260426081149.png]]

### BEM Anatomy

| Type      | Class Name             | Description                                                                                                             |
| --------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-article-template` | The main wrapper for the entire article detail page.                                                                    |
| Modifier  | `--[type]`             | Applied based on the article's tag name (e.g., `--shop`, `--blog`).                                                     |
| Element   | `__item`               | Base class for every row/section in the template. Handles spacing and alignment.                                        |
| Modifier  | `__item--[type]`       | Specific type modifier (e.g., `--headerimage`, `--content`, `--title`).                                                 |
| Element   | `__title`              | Specifically used for section titles within "Linked Items" or related content.                                          |
| Element   | `__error`              | The container for "Missing Renderer" warnings in the CMS.                                                               |
| Element   | `__empty`              | Displayed when a dynamic section (like 'Related Articles') has no data. Typically handles "No results found" messaging. |

### Layout Implementation

The `__item` element is often paired with Bootstrap container classes injected via the Blazor logic:

- **Full Width:** `.container-fullwidth`
- **Fluid:** `.container-fluid`
- **Fixed:** `.container`

##### Generated HTML

```html
<div class="as-article-template as-article-template--blog">
    
    <!-- Header Image Section -->
    <div class="as-article-template__item as-article-template__item--headerimage container-fluid">
        <img src="..." class="as-article-item__image" />
    </div>

    <!-- Content Section -->
    <div class="as-article-template__item as-article-template__item--content container">
        <div class="as-article-content">...</div>
    </div>

</div>
```

##### SCSS

```scss
.as-article-template {
  &__item {
    &--headerimage {
      display: flex;
      justify-content: center;
      margin-bottom: $spacer * 1.5;

      .as-picture__image {
        max-width: 100%;
        height: auto;
        max-height: 800px;
      }
    }
  }
}
```

